<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>AppCenter</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row class="header">
      <ion-col width-33>
        <ion-segment [(ngModel)]="type" style="margin-top:-7px;">
           <ion-segment-button value="all">
              <div class="logo-windows">
                <ion-icon name="logo-windows"></ion-icon>
              </div>
               所有应用
           </ion-segment-button>
           <ion-segment-button value="show">
               左侧显示
           </ion-segment-button>
           <ion-segment-button value="hidden">
               非左侧显示
           </ion-segment-button>
        </ion-segment>
      </ion-col>
      <ion-col width-33>
         <ion-searchbar [placeholder]="' '" style="margin-left:70px; margin-top:-10px;"></ion-searchbar>
     </ion-col>
     <ion-col width-33 text-right>
       <div class="add">
         <button ion-button small style="background-color: rgba(255,255,255,0.1);">
           <ion-icon name="add"></ion-icon>添加应用
         </button>
       </div>
     </ion-col>
    </ion-row >
  </ion-grid>
  <div class="icon"  style="margin-left:80px;margin-top:100px;">


    <div *ngFor="let app of apps">
      <div  class="app-button-item">
      <div *ngIf="type=='all' || type=='show'" class="app-button">
         <button ion-button color="{{app.color}}">
            <ion-icon name="{{app.icon}}"></ion-icon>
         </button>
      </div>
      <p>{{app.title}}</p>
    </div>
</div>
  </div>

</ion-content>
